<template>
  <div class="employment-dashboard">
    <!-- 中部内容 -->
    <div class="main-content">
      <!-- 上部分：统计卡片 -->
      <div class="card">
        <ElRow :gutter="20">
          <ElCol :xs="24" :sm="12" :md="6" v-for="card in statsCards" :key="card.id">
            <ArtStatsCard
              :icon="card.icon"
              :count="card.count"
              :description="card.description"
              :iconSize="card.iconSize"
              :decimals="0"
              :iconBgColor="card.iconBgColor"
              :showArrow="card.showArrow"
              separator=","
              iconColor="#fff"
            />
          </ElCol>
        </ElRow>

        <!-- 折线统计图 -->
        <div class="charts">
          <el-card class="card art-custom-card" shadow="never">
            <div class="card-header">
              <span>{{ weeklyPlacedYear }}届周增毕业去向落实人数</span>
            </div>

            <ArtLineChart
              :data="weeklyPlacedCount"
              :xAxisData="weeklyPlacedDate"
              :showAreaColor="true"
            />
          </el-card>
        </div>
      </div>

      <!-- 下部分：环状图 -->
      <div class="card">
        <el-row :gutter="16">
          <el-col :span="12">
            <div class="card art-custom-card">
              <div class="card-header" style="margin-bottom: 32px">
                <span>{{ weeklyPlacedYear }}届周落实类别占比</span>
              </div>
              <ArtRingChart
                :data="placedCategory"
                :radius="['34%', '50%']"
                :borderRadius="0"
                :showLegend="true"
                :showLabel="true"
                legendPosition="bottom"
              />
            </div>
          </el-col>
          <el-col :span="12">
            <div class="card art-custom-card">
              <div class="card-header">
                <span>{{ weeklyPlacedYear }}届就业流向</span>
              </div>
              <el-segmented v-model="trigger" :options="['地区', '行业', '职业']" />
              <ArtRingChart
                v-show="trigger === '地区'"
                :data="employmentRegion"
                :radius="['34%', '50%']"
                :borderRadius="0"
                :showLegend="true"
                :showLabel="true"
                legendPosition="bottom"
              />
              <ArtRingChart
                v-show="trigger === '行业'"
                :data="employmentIndustry"
                :radius="['34%', '50%']"
                :borderRadius="0"
                :showLegend="true"
                :showLabel="true"
                legendPosition="bottom"
              />
              <ArtRingChart
                v-show="trigger === '职业'"
                :data="employmentOccupation"
                :radius="['34%', '50%']"
                :borderRadius="0"
                :showLegend="true"
                :showLabel="true"
                legendPosition="bottom"
              />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 右侧边栏 -->
    <div class="sidebar">
      <!-- 上部：9个导航icon -->
      <div class="nav-icons">
        <div class="section-title">
          <h3>职业中心</h3>
        </div>
        <div class="nav-grid">
          <div
            v-for="item in navItems"
            :key="item.id"
            class="nav-item"
            @click="goToPage(item.path)"
          >
            <div class="nav-icon" :style="{ backgroundColor: item.color }">
              <i class="iconfont-sys" v-html="item.icon"></i>
            </div>
            <div class="nav-text">{{ item.title }}</div>
          </div>
        </div>
      </div>

      <!-- 中部：系统消息列表 -->
      <div class="system-notices">
        <div class="section-title" id="system-notices-title">
          <h3>系统消息</h3>
          <h5 @click="goToPage('')">查看更多</h5>
        </div>
        <div class="notices-list">
          <div
            v-for="notice in systemMessage"
            :key="notice.id"
            class="notice-item"
            @click="goToPage(notice.path)"
          >
            <div class="notice-icon">
              <el-tag :type="notice.tag">
                {{
                  notice.tag === 'success'
                    ? '职规'
                    : notice.tag === 'warning'
                      ? '预警'
                      : notice.tag === ''
                        ? '咨询'
                        : notice.tag === 'danger'
                          ? '警告'
                          : '通知'
                }}
              </el-tag>
            </div>
            <div class="notice-content">
              <div class="notice-title">{{ notice.title }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 下部：帮助文档链接 -->
      <div class="help-links">
        <div class="section-title" id="system-notices-title">
          <h3>帮助文档</h3>
          <h5 @click="goToPage('')">查看更多</h5>
        </div>
        <div class="links-list">
          <div
            v-for="link in helpLinks"
            :key="link.id"
            class="link-item"
            @click="goToPage(link.path)"
          >
            <span>{{ link.title }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import { schoolTotal } from '@/api/system/auth'
  import { useRouter } from 'vue-router'

  defineOptions({ name: 'EmploymentDashboard' })

  const router = useRouter()

  //工作台顶部的4项数据
  interface StatsCard {
    id: number | string
    icon: string
    count: number
    description: string
    iconSize?: number
    iconBgColor?: string
    showArrow?: boolean
  }
  const statsCards = ref<StatsCard[]>([])

  //周增毕业去向落实人数
  const weeklyPlacedDate = ref([])
  const weeklyPlacedCount = ref([])
  const weeklyPlacedYear = ref([])

  //落实类别占比
  const placedCategory = ref([])

  //就业（地区，行业，职业）分布
  const trigger = ref('地区')
  const employmentRegion = ref([])
  const employmentIndustry = ref([])
  const employmentOccupation = ref([])

  //系统消息
  interface SystemMessage {
    id: number | string
    title: string
    tag: string
    path: string
  }
  // systemMessage 的声明
  const systemMessage = ref<SystemMessage[]>([])

  // 导航项
  const navItems = ref([
    {
      id: 1,
      title: '职测档案',
      icon: '&#xe60d;',
      path: '/employment/student-profile',
      color: '#409eff'
    },
    { id: 2, title: '职规档案', icon: '&#xe623;', path: '', color: '#67c23a' },
    { id: 3, title: '简历档案', icon: '&#xe625;', path: '', color: '#e6a23c' },
    { id: 4, title: '咨询档案', icon: '&#xe624;', path: '', color: '#f56c6c' },
    { id: 5, title: '咨询日历', icon: '&#xe626;', path: '', color: '#909399' },
    { id: 6, title: '行为追踪', icon: '&#xe60f;', path: '', color: '#409eff' },
    { id: 7, title: '危机上报', icon: '&#xe610;', path: '', color: '#67c23a' },
    { id: 8, title: '学生满意度', icon: '&#xe611;', path: '', color: '#e6a23c' },
    { id: 9, title: '企业满意度', icon: '&#xe60e;', path: '', color: '#f56c6c' }
  ])

  // 帮助链接
  const helpLinks = ref([
    { id: 1, title: '产品介绍', path: '' },
    { id: 2, title: '使用指南', path: '' }
  ])

  onMounted(async () => {
    try {
      const result = await schoolTotal()
      console.log(result)

      if (result) {
        // 更新已定义的响应式数据
        definition(result)
      }
    } catch (error) {
      console.error('获取数据失败:', error)
    }
  })

  const definition = (result: any) => {
    statsCards.value = result.studentChange
    weeklyPlacedDate.value = result.weeklyPlacedDate
    weeklyPlacedCount.value = result.weeklyPlacedCount
    weeklyPlacedYear.value = result.weeklyPlacedYear
    placedCategory.value = result.placedCategory
    employmentRegion.value = result.employmentRegion
    employmentIndustry.value = result.employmentIndustry
    employmentOccupation.value = result.employmentOccupation
    systemMessage.value = result.systemMessage
  }

  // 页面跳转
  const goToPage = (path: string) => {
    if (path) {
      router.push(path)
    }
  }
</script>

<style scoped lang="scss">
  .employment-dashboard {
    display: flex;
    gap: 16px;
    height: 100%;

    .main-content {
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: 16px;
    }

    .sidebar {
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 300px;

      .nav-icons,
      .system-notices,
      .help-links {
        padding: 16px;
        background: var(--art-main-bg-color);
        border-radius: calc(var(--custom-radius) + 4px);
      }

      #system-notices-title {
        display: flex;
        align-items: center;
        justify-content: space-between !important;

        h5 {
          color: #175dff;
        }
      }

      .section-title {
        margin-bottom: 16px;

        h3 {
          margin: 0;
          font-size: 16px;
          font-weight: 500;
        }
      }

      .nav-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;

        .nav-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;

          .nav-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            margin-bottom: 8px;
            border-radius: 50%;

            i {
              font-size: 20px;
              color: white;
            }
          }

          .nav-text {
            font-size: 12px;
            text-align: center;
          }
        }
      }

      .notices-list {
        .notice-item {
          display: flex;
          align-items: center;
          padding: 12px 0;
          border-bottom: 1px solid var(--art-border-color);

          &:last-child {
            border-bottom: none;
          }

          .notice-content {
            flex: 1;

            .notice-title {
              margin-bottom: 4px;
              font-size: 14px;
              color: var(--art-text-gray-900);
            }
          }
        }
      }

      .links-list {
        display: flex;

        .link-item {
          display: flex;
          align-items: center;
          width: 50%;
          padding: 8px 0;
          color: var(--art-text-gray-700);
          cursor: pointer;
          transition: color 0.2s;

          &:hover {
            color: var(--main-color);
          }

          i {
            margin-right: 8px;
            font-size: 14px;
          }

          span {
            font-size: 14px;
          }
        }
      }
    }
  }

  .charts {
    padding-top: 20px;

    .card {
      padding: 20px;
      background-color: var(--art-main-bg-color);
      border-radius: var(--custom-radius);

      .card-header {
        padding-bottom: 15px;

        span {
          font-size: 16px;
          font-weight: 500;
        }
      }
    }

    .el-col {
      margin-bottom: 20px;
    }
  }

  .card {
    padding: 20px;
    background-color: var(--art-main-bg-color);
    border-radius: var(--custom-radius);

    .card-header {
      padding-bottom: 15px;

      span {
        font-size: 16px;
        font-weight: 500;
      }
    }
  }

  @media screen and (width <= 768px) {
    .employment-dashboard {
      flex-direction: column;

      .sidebar {
        width: 100%;
      }
    }
  }
</style>
